<template>
  <div>
    <div class="left">
      <draggable v-model="myArray" :options="{group: { name: 'people', pull: 'clone' }}" @start="drag=true" @end="drag1End">
      <div v-for="element in myArray" :key="element.id" class="ele1">{{element.name}}</div>
    </draggable>
    </div>
    <div class="center"></div>
    <div class="right">
      <draggable v-model="myArray2" :options="{group:'people'}" @start="drag=true" @end="drag2End">
      <div v-for="element in myArray2" :key="element.id" class="ele2">{{element.name}}</div>
    </draggable>
    </div>
    <button @click="save">保存</button>
  </div>
</template>

<script>
export default { // options 的group一样就能互相拖动
  data () {
    return {
      myArray: [
        {
          name: 'haha',
          id: 1
        },
        {
          name: 'xixi',
          id: 2
        },
        {
          name: 'asdasda',
          id: 3
        }
      ],
      myArray2: [
        {
          name: '3223d2fd2f',
          id: 11
        },
        {
          name: '3f3f3f34f34f',
          id: 112
        },
        {
          name: '34f90ui90u30f',
          id: 113
        }
      ]
    }
  },
  components: {
    draggable: require('vuedraggable')
  },
  methods: {
    drag1End (val) {
      console.log(val.target)
    },
    drag2End (val) {
      console.log(val)
    },
    save () {
      console.log(this.myArray)
      console.log(this.myArray2)
    }
  }
}
</script>

<style lang="scss">
.div1{
  width: 200px;
  height: 200px;
  background: blue;
}
.div2{
  width: 200px;
  height: 200px;
  background: red;
}
.center{
  width: 300px;
  height: 300px;
}
.ele1{
  width: 100px;
  height: 50px;
  background: red;
}
.ele2{
  width: 200px;
  height: 100px;
  background: yellow;
}
</style>